<div id="content-top">
			<h2>Dashboard</h2>
			<a id="topLink" href="#">Change Order</a> 
			<span class="clearFix"> </span>
		</div><!-- end of div#content-top -->
		
		<div id="left-col">
		 
		 	<div class="box">
				<h4 class="yellow">Side Menu</h4>
				<div class="box-container" ><!-- use no-padding wherever you need element padding gone -->
				<ul class="list-links">
					<li><a href="#">Manage Filters</a></li>
					<li>
						<a href="#">Setup a New Site</a>
						<ul>
							<li><a href="#">Configure Paths</a></li>
							<li><a href="#">Define Database Name</a></li>
						</ul>
					</li>
					<li><a href="#">Manage Site Accounts</a></li>
				</ul>
				</div><!--end of div.box-container -->
			</div><!-- end of div.box -->
			
			
			<div class="hidden"><!-- the modal box container - this div is hidden until it is called from a modal box trigger. see cleanity.js for details -->
    			<div id="sample-modal">
    				<h2>Modal Box Content</h2>
    				<p>Place your desired modal box content here</p>
    			</div>
    		</div><!-- end of hidden -->
    
			<div class="box">
				<h4 class="light-blue">System Messages</h4>
				<div class="box-container">
                  <div id="sys-messages-container">
                  <h5>Latest Messages <span>(Opens Modal)</span></h5>
                      <ul>
                      <li class="even-messages"><a href="#">Where is Everyone? New Stuff i...</a>
                        <a class="sysmessage-delete" href="#"><img alt=" " src="<?php echo static_url("images/icon-delete-message.gif"); ?>"/></a></li>
                      <li class="odd-messages"><a href="#">Version 2 is Online. You can upd...</a>
                        <a class="sysmessage-delete" href="#"><img alt=" " src="<?php echo static_url("images/icon-delete-message.gif"); ?>"/></a></li>                      
                      </ul>
                  </div>
                  
                 <div id="quick-send-message-container">
                  	<h5>Quick Send</h5>
                  
                    <form action="" method="get" name="send-message-form" id="form2">
                  		<fieldset>
                  			<legend>Quick Send Message</legend>
                  			<p><label>Message Title:</label>
                  			<input type="text" id="message-title" name="message-title"/></p>
        	          		<p><label>Content:</label>
        	          		<textarea rows="5" cols="10" name="content"></textarea></p>
                            <div class="inner-nav">
                				<div class="align-left"><input type="checkbox" value="" name="send-everyone"/>To Everyone</div>
                				<div class="align-right"><a onclick="javascript:document.forms['send-message-form'].submit();" href="#"><span>send</span></a></div>
                                <span class="clearFix"> </span>
                			</div>  	
    	    	          	<input type="button" value="Send Message" name="button" class="hidden"/>
        	          	</fieldset>
                  	</form>
                  </div>
          	</div><!--end of div.box-container -->
          	</div><!--end of div.box -->
          
          
          <div id="to-do" class="box">
              <ul class="tab-menu tabs-nav">
                  <li class="tabs-selected"><a href="#to-dos">To Do</a></li>
                  <li class=""><a href="#completed">Completed</a></li>
              </ul>
              <div id="to-dos" class="box-container">
                 <div id="to-do-list">
                    <ul>
                        <li class="even"><input type="checkbox" value="" name="check"/>
                        <a href="#">To Do Will Open in Modal Box</a><br/>
                        <small><strong>Deadline:</strong>Today</small>
                        </li>
                        <li class="odd"><input type="checkbox" value="" name="check"/>
                        <a href="#">To Do Will Open in Modal Box</a><br/>
                        <small><strong>Deadline:</strong>Today</small>
                        </li>
                        
                        <li class="even"><input type="checkbox" value="" name="check"/>
                        <a href="#">To Do Will Open in Modal Box</a><br/>
                        <small><strong>Deadline:</strong>Today</small>
                        </li>
    
                        <li class="odd"><input type="checkbox" value="" name="check"/>
                        <a href="#">To Do Will Open in Modal Box</a><br/>
                        <small><strong>Deadline:</strong>Today</small>
                        </li>
                    </ul>    
                    <div class="inner-nav">
                        <div class="align-left"><a href="#"><span>view all</span></a></div>
                        <div class="align-right"><a href="#"><span>to-do config</span></a></div>
                        <span class="clearFix"> </span>
                    </div>       
                  </div><!-- end of div#to-do-list -->
              </div><!-- end of div.box-container -->

              <div id="completed" class="box-container">Completed tasks div content</div>  
          </div><!-- end of div.box -->
			
		 </div><!-- end of #left-col -->
		 
		 <div id="mid-col">
		 	
		 	<!-- 
		 	<div class="notification attention png_bg">
				<a class="close" href="#"><span></span></a>
				<div>
					Attention notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate, sapien quis fermentum luctus, libero. 
				</div>
			</div>
			
			<div class="notification information png_bg">
				<a class="close" href="#"><span></span></a>
				<div>
					Information notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate, sapien quis fermentum luctus, libero.
				</div>
			</div>
			
			<div class="notification success png_bg">
				<a class="close" href="#"><span></span></a>
				<div>
					Success notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate, sapien quis fermentum luctus, libero.
				</div>
			</div>
			
			<div class="notification error png_bg">
				<a class="close" href="#"><span></span></a>
				<div>
					Error notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate, sapien quis fermentum luctus, libero.
				</div>
			</div>
			-->
			
			<div class="box">      
      			<h4 class="white">Form Elements</h4>
        		<div class="box-container">
      				<form class="middle-forms" method="post" action="">
      				<h3>Form Title</h3>
      				<p>Please complete the form below. Mandatory fields marked <em>*</em></p>
      				<fieldset>
      					<legend>Fieldset Title</legend>
      					<ol>
      						<li class="even"><label class="field-title">Short Textbox <em>*</em>:</label> <label><input class="txtbox-short"/>
      						<span class="form-confirm-inline">Confirm Message</span></label><span class="clearFix"> </span></li>
      						
      						<li><label class="field-title">Radio Boxes <em>*</em>: </label> <label>
      						<input type="radio" value="val1" checked="checked" name="variable"/>
      						Radio1 <input type="radio" value="val2" name="variable"/>
      						Radio2 </label><span class="clearFix"> </span></li>
      						
      						<li class="even"><label class="field-title">Mid Textbox:</label> <label><input class="txtbox-middle"/>
      						<span class="form-error-inline">Error Message</span></label><span class="clearFix"> </span></li>
      						
      						<li><label class="field-title">Select Menu:</label> <label>
      						<select class="form-select"><option value="option1">Menu Option 1</option><option value="option2">Menu Option 2</option></select></label><span class="clearFix"> </span></li>
      						
      						<li class="even"><label class="field-title">Long Textbox:</label> <label><input class="txtbox-long"/></label><span class="clearFix"> </span></li>
      						
      						<li><label class="field-title">Checkboxes: </label> <label>
      						<input type="checkbox" id="check_one" value="check1" name="check_one"/>
      						Check <input type="checkbox" id="check_two" value="check2" name="check_two"/>
      						Check </label><span class="clearFix"> </span></li>
      						
      						<li class="even">
      							<label class="field-title">Textarea: </label> 
      							<label><textarea></textarea></label>
      							<span class="clearFix"> </span>
      						</li>
      					</ol><!-- end of form elements -->
      				</fieldset>
      				<p class="align-right"><input type="image" src="<?php echo static_url("images/bt-send-form.gif"); ?>"/></p>
      				<span class="clearFix"> </span>
      				</form>
      			</div>
      		</div>
			
		 	<div class="box">
      		<h4 class="white">Tables <a class="heading-link" href="2-columns.html">See Full Page Tabbed Tables Example</a></h4>
        	<div class="box-container">     		
      		<table>
      			<thead>
      				<tr>
      					<td>Col1</td>
      					<td>Col2</td>
      					<td>Col3</td>
      					<td>Col4</td>
      				</tr>
      			</thead>
      			<tfoot>
      				<tr>
      					<td class="col-chk"><input type="checkbox"/></td>
      					<td colspan="4"><div class="align-right"><select class="form-select"><option value="option1">Bulk Options</option>
      					<option value="option2">Delete All</option></select>
      					<a class="button" href="#"><span>perform action</span></a></div></td>
      				</tr>
      			</tfoot>
      			<tbody>
      				<tr class="odd">
      					<td class="col-chk"><input type="checkbox"/></td>
      					<td class="col-first">John Doe sdfh asdfh asfh asfh asfh asfh asfh ash</td>
      					<td class="col-second"><a href="#">johndoe@mail.com</a></td>
      					<td class="row-nav"><a class="table-edit-link" href="#">Edit</a> <span class="hidden"> | </span> <a class="table-delete-link" href="#">Delete</a></td>
      				</tr>
      				<tr>
      					<td class="col-chk"><input type="checkbox"/></td>
      					<td class="col-first">Jane Doe</td>
      					<td class="col-second"><a href="#">johndoe@mail.com</a></td>
      					<td class="row-nav"><a class="table-edit-link" href="#">Edit</a> <span class="hidden"> | </span> <a class="table-delete-link" href="#">Delete</a></td>
      				</tr>
      				<tr class="odd">
      					<td class="col-chk"><input type="checkbox"/></td>
      					<td class="col-first">George Livingston</td>
      					<td class="col-second"><a href="#">johndoe@mail.com</a></td>
      					<td class="row-nav"><a class="table-edit-link" href="#">Edit</a> <span class="hidden"> | </span> <a class="table-delete-link" href="#">Delete</a></td>
      				</tr>
      				<tr>
      					<td class="col-chk"><input type="checkbox"/></td>
      					<td class="col-first">Lorem Ipsum Sit Amet</td>
      					<td class="col-second"><a href="#">johndoe@mail.com</a></td>
      					<td class="row-nav"><a class="table-edit-link" href="#">Edit</a> <span class="hidden"> | </span> <a class="table-delete-link" href="#">Delete</a></td>
      				</tr>
      				<tr class="odd">
      					<td class="col-chk"><input type="checkbox"/></td>
      					<td class="col-first">John Doe</td>
      					<td class="col-second"><a href="#">johndoe@mail.com</a></td>
      					<td class="row-nav"><a class="table-edit-link" href="#">Edit</a> <span class="hidden"> | </span> <a class="table-delete-link" href="#">Delete</a></td>
      				</tr>
      			</tbody>
      		</table>  	
      	</div><!-- end of div.box-container -->
      	</div> <!-- end of div.box -->
		 
		</div><!-- end of #mid-col -->
		 
		<div id="right-col">
		
		<div class="box">
			<h4 class="light-grey">Calendar</h4>
			<div class="box-container" id="calendar-container"><!-- use no-padding wherever you need element padding gone -->
			
				<div id="calendar-container">
			  		<h5>Calendar</h5>
					<div id="calendar"></div>
					
					<div class="inner-nav">
	                	<div class="align-left"><a href="#"><span>+ add event</span></a></div>
	                	<div class="align-right"><a href="#"><span>? list events</span></a></div>
	                        <span class="clearFix"> </span>
	                </div> 
				</div>
			</div>
		</div>
		
		<div class="box">  	
		  		<h4 class="light-blue">Quick Visual Links</h4>
            <div class="box-container">
		  		<ul id="quick-visual-links">
		  			<li><a href="#"><img alt="" src="<?php echo static_url("images/ql-settings.gif"); ?>"/><br/>Settings</a></li>
		  			<li><a href="#"><img alt="" src="<?php echo static_url("images/ql-users.gif"); ?>"/><br/>Users</a></li>
		  			<li><a href="#"><img alt="" src="<?php echo static_url("images/ql-messages.gif"); ?>"/><br/>Messages</a></li>
		  			<li><a href="#"><img alt="" src="<?php echo static_url("images/ql-photos.gif"); ?>"/><br/>Photos</a></li>
		  			<li><a href="#"><img alt="" src="<?php echo static_url("images/ql-media.gif"); ?>"/><br/>Media</a></li>
		  			<li><a href="#"><img alt="" src="<?php echo static_url("images/ql-design.gif"); ?>"/><br/>Design</a></li>
		  			<li><a href="#"><img alt="" src="<?php echo static_url("images/ql-options.gif"); ?>"/><br/>Options</a></li>
		  			<li><a href="#"><img alt="" src="<?php echo static_url("images/ql-databases.gif"); ?>"/><br/>Databases</a></li>
		  			<li><a href="#"><img alt="" src="<?php echo static_url("images/ql-paths.gif"); ?>"/><br/>File Paths</a></li>   
		  		</ul>
                <span class="clearFix"> </span> 
          </div><!-- end of div.box-container -->            
          </div><!-- end of div.box -->      
		
		</div><!-- end of #right-col -->